<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 栅格系统示例</title>
    <!-- 
	引入 Bootstrap CSS 
	
	代码解释
HTML 部分
引入文件：在 <head> 标签中引入 Bootstrap 的 CSS 文件，在 <body> 标签末尾引入 Bootstrap 的 JavaScript 文件。
容器类：使用 .container 类创建一个响应式的容器，它会根据不同的屏幕尺寸自动调整宽度。
行类：使用 .row 类创建一行，用于容纳列。
列类：使用如 .col-md-6、.col-md-4 等预定义的响应式类来定义列的宽度。md 表示中等屏幕尺寸（≥ 768px），数字表示该列在一行中所占的栅格份数（Bootstrap 栅格系统共 12 份）。
嵌套列：可以在列中嵌套新的 .row 和列，实现更复杂的布局。
CSS 部分
虽然没有显式编写 CSS 代码，但 Bootstrap 的 CSS 文件已经提供了丰富的样式和布局规则，包括栅格系统、响应式设计等功能。
通过上述代码，你可以看到如何使用 Bootstrap 的栅格系统创建不同的响应式布局，并且在不同屏幕尺寸下自动调整列的排列和宽度。

	-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>

    <!-- 页面内容 -->
    <div class="container">
        <h1 class="mt-5">Bootstrap 栅格系统示例</h1>

        <!-- 一行两列布局 -->
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="p-3 border bg-light">
                    <h2>列 1</h2>
                    <p>这是第一列的内容。在中等屏幕及以上尺寸时，它将占据一半的宽度；在小屏幕上，它将自动堆叠成一列。</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="p-3 border bg-light">
                    <h2>列 2</h2>
                    <p>这是第二列的内容。同样，在中等屏幕及以上尺寸时，它将占据一半的宽度；在小屏幕上，它将自动堆叠成一列。</p>
                </div>
            </div>
        </div>

        <!-- 一行三列布局 -->
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="p-3 border bg-light">
                    <h2>列 1</h2>
                    <p>这是三列布局中的第一列。在中等屏幕及以上尺寸时，每列将占据三分之一的宽度。</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-3 border bg-light">
                    <h2>列 2</h2>
                    <p>这是三列布局中的第二列。在中等屏幕及以上尺寸时，每列将占据三分之一的宽度。</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-3 border bg-light">
                    <h2>列 3</h2>
                    <p>这是三列布局中的第三列。在中等屏幕及以上尺寸时，每列将占据三分之一的宽度。</p>
                </div>
            </div>
        </div>

        <!-- 嵌套列布局 -->
        <div class="row mt-4">
            <div class="col-md-8">
                <div class="p-3 border bg-light">
                    <h2>外层列</h2>
                    <p>这是一个外层列，它包含了嵌套的列布局。</p>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="p-3 border bg-secondary text-white">
                                <h3>嵌套列 1</h3>
                                <p>这是嵌套列中的第一列。</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 border bg-secondary text-white">
                                <h3>嵌套列 2</h3>
                                <p>这是嵌套列中的第二列。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-3 border bg-light">
                    <h2>另一外层列</h2>
                    <p>这是另一个外层列，与嵌套列布局并列。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"></script>
</body>

</html>